<template>
  <div class="user">
    <div v-if="!flag">
      <navigator>
        <van-row class="user-poster">
          <button v-if="canIUse" class='bottom' type='primary' open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权获取头像和昵称</button>
          <view v-else>请升级微信版本</view>
        </van-row>
      </navigator>

    </div>
    <div v-else>
      <navigator url @click="toLogin()">
        <van-row class="user-poster">
          <van-col span="6" v-if="flag">
            <van-image round width="60" height="60" :src="user.wechatHeadImgUrl" />
          </van-col>
          <van-col span="15">
            <div style="padding-top:25px;">{{user.nickName}}</div>
          </van-col>
          <van-col span="3" v-if="arrowFlagComputed">
            <van-icon name="arrow" style="padding-top:25px;" />
          </van-col>
        </van-row>
      </navigator>
    </div>

    <!--<img class="user-poster" src="/static/img/banner.jpg">-->
    <div class="user-links">
      <van-row>
        <van-col span="6" @click="toOrder(1)">
          <van-icon name="pending-payment" /> 待付款
        </van-col>
        <van-col span="6" user-poster @click="toOrder(2)">
          <van-icon name="tosend" /> 待发货
        </van-col>
        <van-col span="6" @click="toOrder(3)">
          <van-icon name="logistics" /> 已发货
        </van-col>
        <van-col span="6" @click="toOrder(4)">
          <van-icon name="bag-o" /> 已完成
        </van-col>
      </van-row>
    </div>
    <van-row>
      <van-col span="24">
        <van-cell-group class="user-group">
          <van-cell icon="records" title="全部订单" is-link @click="toOrder(0)" />
        </van-cell-group>
      </van-col>
    </van-row>

    <van-cell-group>
      <van-cell icon="location-o" title="收货地址" is-link @click="toAddress()" />
      <van-cell icon="like-o" title="我的收藏" is-link @click="toFavorite()" />
      <van-cell icon="eye-o" title="我的足迹" is-link @click="toTrack()" />

      <!-- <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
      <van-cell icon="gift-o" title="我收到的礼物" is-link /> -->
      <!-- <van-cell icon="warning-o" title="关于本项目" is-link @click="toAbout()" /> -->
    </van-cell-group>

    <button class="kf_button" open-type="contact" session-from="weapp">
      <image class="kf_image" src="/static/img/kf.png" mode="aspectFit"></image>
    </button>
  </div>

</template>

<script>
// Use Vuex
import store from "@/utils/store.js";

export default {
  config: {
    navigationBarTitleText: "个人中心"
  },
  data() {
    return {
      canIUse: wx.canIUse('button.open-type.getUserInfo'),
      flag: false,
      arrowFlag: false
    };
  },
  computed: {
    user() {
      return store.state.user;
    },
    arrowFlagComputed() {
      return this.arrowFlag;
    }
  },
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: "我的"
    })

  },
  onShow() {
    let that = this
    wx.getSetting({
      success: function (res) {
        console.log('setting', res)
        if (res.authSetting['scope.userInfo']) {
          that.flag = true
        } else {
          const url = "/pages/profile/loginOption/index";
          wx.navigateTo({ url });
        }
      }
    })
  },
  created() {
    this.wxLogin()
  },
  methods: {
    bindGetUserInfo(e) {
      if (e.mp.detail.userInfo) {
        var that = this;
        console.log("用户信息", e.mp.detail.userInfo)
        this.$API.post("/user/upDataUserInfo?name=" +
          e.mp.detail.userInfo.nickName +
          "&headUrl=" +
          e.mp.detail.userInfo.avatarUrl).then(resp => {
          })
        this.flag = true
      } else {
        console.log("拿不到用户信息", e.mp.detail)
      }
    },
    wxLogin() {
      var that = this
      wx.login({
        success: loginResp => {
          that.$API.post("wechat/wxLogin?code=" + loginResp.code).then(res => {
            console.log("登录成功");
            store.commit("setToken", res.data.token);
            store.commit("setUser", res.data.user);
            wx.getSetting({
              success: function (res) {
                console.log("已经授权");
                if (res.authSetting['scope.userInfo']) {
                  wx.getUserInfo({
                    success: function (res) {
                      that.$API.post("/user/upDataUserInfo?name=" +
                        res.userInfo.nickName +
                        "&headUrl=" +
                        res.userInfo.avatarUrl).then(resp => {
                        })
                      let user = store.state.user;
                      user.nickName = res.userInfo.nickName;
                      user.wechatHeadImgUrl = res.userInfo.avatarUrl;
                      store.commit("setUser", user);
                      that.flag = true
                    },
                    fail: res => {

                    }
                  })
                }
              },
              fail: res => {
                console.log("没有授权");
              }
            })
          });
        },
        fail: res => {
          // do not thing
          // this.toLogin();

        }
      });
    },
    toLogin() {
      if (store.state.token == null || store.state.token == undefined) {
        const url = "/pages/profile/loginOption/index";
        wx.navigateTo({ url });
      }
    },
    toOrder(status) {
      console.info('选择的页签', status)
      const url = "../../order/index?status=" + status;
      wx.navigateTo({ url });
    },
    toAddress() {
      const url = "/pages/address/index";
      wx.navigateTo({ url });
    },
    toTrack() {
      const url = "../../goods/list?type=track"
      wx.navigateTo({ url });
    },
    toFavorite() {
      const url = "../../goods/list?type=favorite"
      wx.navigateTo({ url });
    },
    toAbout() {
      const url = "/pages/profile/about/index";
      wx.navigateTo({ url });
    }
  }
};
</script>


<style>
.user-poster > .van-row {
  padding: 8px;
  background-color: lightblue;
}

.user-links {
  padding: 15px;
  text-align: center;
  background-color: #fff;
}

.kf_button{
  background-color: rgba(255, 255, 255, 0);
  border: 0px;
  height: 30px;
  right: 20px;
  bottom: 20px;
  position: fixed;
}
.kf_button::after{
  border: 0px;
}
.kf_image{
  z-index: 9999;
  width: 35px;
  height: 35px;
}
</style>
